<!DOCTYPE HTML>
<html>
<head>
	<title></title>
	<meta charset="utf-8" />
	<meta http-equiv="pragma" content="no-cache">  
    <meta http-equiv="cache-control" content="no-cache">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" href="src/css/global.css" type="text/css" />
	<link rel="stylesheet" href="src/css/menus.css" type="text/css" />
	<link rel="stylesheet" href="src/css/market.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="src/css/cart.css" type="text/css">
	<style type="text/css">
	.category {
		background: white;
		height: 50px;
		z-index:10000;
	}
	
	.category .unchecked {
		float: left;
		width: 25%;
		text-align: center;
		font-size: 25px;
		line-height: 50px;
		font-weight: bold;
		display: block;
	}

	.category .checked {
		float: left;
		width: 25%;
		text-align: center;
		font-size: 25px;
		line-height: 50px;
		font-weight: bold;
		background: #fd7271;
		display: block;
	}

	.category .checked a {
		color: white;
	}
	</style>
</head>
<style type="text/css" media="all">
</style>
<script type="text/javascript">
try{WeixinJSBridge.call('hideToolbar');}
catch(err){
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {WeixinJSBridge.call('hideToolbar');});}
</script>
<body>
	<section class="container main-container" id="menus">
		<div id="notice-board" >
			<img src="src/img/sticker-left.png" class="sticker" id="sticker-left" />
			<img src="src/img/sticker-right.png" class="sticker" id="sticker-right" />
			<section class="content-wrapper" >
				<div class="content" >
					<ul class="content-list" data-id="msg-list" >
					</ul>
				</div>
			</section>
		</div>
		<div class="category" id="category">
		</div>
		<ul id="main-list" style="display: block;">		
		</ul>
	</section>

	<div id="cart-empty-box" class="message-box" style="margin-top:6%; display:none">
  		<header class="fruit-bg-header"></header>
  		<div class="content">
    		<h1><span>咦?</span>你的菜单里还没有东西哦</h1>
    		<p>快去点一些吧！(●-●)ฅ</p>
    		<a class="btn-primary" id="goMenus">去点菜</a>
  		</div>
	</div>

	<section class="container main-container" id="list">
		<ul id="goods-list">
		</ul>
		<div id="totalPrice-list">
		</div>
	</section>



	<footer id="footer-bar">
		<div class="head-border" ></div>
		<div class="btn-wrapper" >
		<ul class="btn-list" >
			<li id="home-btn"><a><img src="src/img/order-icon.png" class="icon"/>我要点菜</a></li>
			<li id="cart-btn">
				<a>
					<img src="src/img/cart-icon.png" class="icon"/>我要结算
					<span id="cart-goods-number" class="hide">1</span>
				</a>
			</li>
		</ul>
		</div>
	</footer>
<script src="src/js/jquery-1.8.0.js"></script>
<script src="src/js/jquery.pin.js"></script>
<script src="src/js/sprintf.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

	customerMenus = new Array;

	$(".category").pin();

	$("#list").hide();

	$("#goMenus").click(function(){
		$("#cart-empty-box").hide();
		$("#list").hide();
		$("#menus").show();
	})

	$("#cart-btn").click(function(){
		$("#menus").hide();
		if(ShowCustomerMenus()){
			$("#list").show();
		}else{
			$("#cart-empty-box").show();
		}
	})

	$("#home-btn").click(function(){
		$(".number-input").val("");
		for(i in customerMenus){			
			if(customerMenus[i].menus_num){
				$(".number-input"+"#"+customerMenus[i].menus_id).val(customerMenus[i].menus_num);
			}
		}
		$("#cart-empty-box").hide();
		$("#list").hide();
		$("#menus").show();
	})



	function RemoveMenus(id) {
		id = parseInt(id);
		delete customerMenus[id];
	}


	function CountShowTotalPrice() {

	}


	function ShowForList() {
		var totalPriceTpl = '<div id="option-box-wrapper"><div id="option-box"><div id="price-box"><div class="circle-icon"><img src="src/img/cart-icon.png" class="" alt=""></div><span>总计：</span><span class="price"><span id="total-price">%s</span>元</span></div><hr><center><a id="order-btn">提交订单</a></center></div><div id="option-box-border"></div></div>'

		var totalPrice = 0;
		var totalNum = 0;
		var totalPriceText = '';
		for(i in customerMenus) {		
			totalPrice += customerMenus[i].menus_total_price;
			totalNum += customerMenus[i].menus_num;
		}
		if(totalPrice != 0){
			totalPriceText = vsprintf(totalPriceTpl, [totalPrice]);
			$("#totalPrice-list").empty();
			$("#totalPrice-list").append(totalPriceText);
			$("#cart-goods-number").text(totalNum);
		}else{
			$("#list").hide();
			$("#cart-empty-box").show();
			$("#cart-goods-number").addClass("hide");
		}

	}


	function Menus(menus_id, menus_name, menus_short, menus_price, menus_unit, menus_num) {
		this.menus_id = menus_id;
		this.menus_name = menus_name;
		this.menus_short = menus_short;
		this.menus_price = menus_price;
		this.menus_unit = menus_unit;
		this.menus_num = menus_num;
		this.menus_total_price = menus_price * menus_num;
	}

	function GetCustomerMunus() {
		customerMenus = [];
		for(var i = 0; i < menuInfo.content.length; i++){
			if($("#main-list").find("input")[i].valueAsNumber){
				customerMenus.push(new Menus(
					$("#main-list").find(".menus-list")[i].id, 
					$(".menus-list").find("#name")[i].innerText,
					$(".menus-list").find(".short")[i].id,
					$(".menus-list").find("#price")[i].innerText,
					$(".menus-list").find("#unit")[i].innerText,
					$(".menus-list").find("input")[i].valueAsNumber
				));
			}
		}
	}

	function ShowCustomerMenus() {
		GetCustomerMunus();
		if (customerMenus.length > 0) {
			var CustomerMenusTpl = '<li id="%s" class="cart-list-item %s"><div class="icon-container fruit-icon pointer" id="icon" style="display: block;">%s</div><div class="content-list-wrapper content"><a class="remove btn right" id="remove" data-id="%s"><img src="src/img/btn-close.png"></a><ul class="content-list bg" id="content-list"><li class="l1"><span class="name color pointer" id="name">%s</span></li><li class="l2"><span class="charge" id="charge">%s元1%s</span><span class="input-box"><input id="number" type="number" class="number-input" value="%s" readonly><span class="bundle" id="bundle">x1份</span></span></li><li class="l3 color"><span>小计：<span class="price" id="price">%s</span>元</span></li></ul></div></li>';

			var totalPriceTpl = '<div id="option-box-wrapper"><div id="option-box"><div id="price-box"><div class="circle-icon"><img src="src/img/cart-icon.png" class="" alt=""></div><span>总计：</span><span class="price"><span id="total-price">%s</span>元</span></div><hr><center><a id="order-btn">提交订单</a></center></div><div id="option-box-border"></div></div>'

			var CustomerMenusText = '';
			var totalPrice = 0;
			var totalPriceText = '';

			for(i in customerMenus) {
				CustomerMenusText += vsprintf(CustomerMenusTpl, [i, customerMenus[i].menus_short, customerMenus[i].menus_name, i, customerMenus[i].menus_name, customerMenus[i].menus_price, customerMenus[i].menus_unit, customerMenus[i].menus_num, customerMenus[i].menus_total_price]);
				totalPrice += customerMenus[i].menus_total_price;
			}

			totalPriceText = vsprintf(totalPriceTpl, [totalPrice]);

			$("#goods-list").empty();
			$("#goods-list").append(CustomerMenusText);
			$("#totalPrice-list").empty();
			$("#totalPrice-list").append(totalPriceText);

			return true;
		} else {
			return false;
		}

	}

	

	function ShowSum(){
		var sum = 0;
		for(var i = 0; i < menuInfo.content.length; i++){
			if($("#main-list").find("input")[i].valueAsNumber){
				sum += $("#main-list").find("input")[i].valueAsNumber;
			}
			if(sum == 0){
				$("#cart-goods-number").addClass("hide");
			}else{
				$("#cart-goods-number").removeClass("hide");
				$("#cart-goods-number").text(sum);
			}
		}
	}
	
	
	//模拟ajax返回的数据
	var categoryInfo = {"code": 1, "content": [{"cy_category_id":"1","cy_category_name":"\u51b7\u83dc"},{"cy_category_id":"2","cy_category_name":"\u70ed\u83dc"},{"cy_category_id":"3","cy_category_name":"\u996e\u6599"},{"cy_category_id":"4","cy_category_name":"\u5176\u5b83"}]};

	var categoryText = "";
	var categoryTpl = '<div class="unchecked"><a id="%s">%s</a></div>';
	for (var i = 0; i < categoryInfo.content.length; i++) {
		categoryText += vsprintf(categoryTpl, [categoryInfo.content[i].cy_category_id, categoryInfo.content[i].cy_category_name]);
	}

	$("#category").append(categoryText);

	$("#1").parent().removeClass("unchecked");
	$("#1").parent().addClass("checked");

	//模拟ajax返回的数据
	var menuInfo = {"code": 1, "content": [{"menus_id":"3","menus_name":"\u849c\u6ce5\u767d\u8089","menus_short":"snbr","menus_rank":"\u8d85\u7ea7\u63a8\u8350","menus_sales":"2342","menus_price":"13","menus_unit":"\u76d8","category_id":"1","category_name":"\u51b7\u83dc"},{"menus_id":"4","menus_name":"\u51c9\u62cc\u732a\u8033","menus_short":"lbzr","menus_rank":"\u4e94\u661f\u63a8\u8350","menus_sales":"432","menus_price":"13","menus_unit":"\u76d8","category_id":"1","category_name":"\u51b7\u83dc"},{"menus_id":"1","menus_name":"\u9752\u6912\u8089\u4e1d","menus_short":"qjrs","menus_rank":"\u4e94\u661f\u63a8\u8350","menus_sales":"123","menus_price":"13","menus_unit":"\u76d8","category_id":"2","category_name":"\u70ed\u83dc"},{"menus_id":"2","menus_name":"\u83b2\u767d\u56de\u9505","menus_short":"lbhg","menus_rank":"\u4e94\u661f\u63a8\u8350","menus_sales":"324","menus_price":"13","menus_unit":"\u76d8","category_id":"2","category_name":"\u70ed\u83dc"},{"menus_id":"5","menus_name":"\u53ef\u53e3\u53ef\u4e50","menus_short":"kkkk","menus_rank":"\u4e94\u661f\u63a8\u8350","menus_sales":"454","menus_price":"13","menus_unit":"\u74f6","category_id":"3","category_name":"\u996e\u6599"},{"menus_id":"6","menus_name":"\u767e\u4e8b\u53ef\u4e50","menus_short":"bskk","menus_rank":"\u4e94\u661f\u63a8\u8350","menus_sales":"542","menus_price":"13","menus_unit":"\u74f6","category_id":"3","category_name":"\u996e\u6599"},{"menus_id":"7","menus_name":"\u9152\u917f\u5c0f\u5706\u5b50","menus_short":"jnxyz","menus_rank":"\u4e94\u661f\u63a8\u8350","menus_sales":"325","menus_price":"13","menus_unit":"\u7897","category_id":"4","category_name":"\u5176\u5b83"},{"menus_id":"8","menus_name":"\u5357\u74dc\u997c","menus_short":"ngb","menus_rank":"\u4e94\u661f\u63a8\u8350","menus_sales":"653","menus_price":"13","menus_unit":"\u76d8","category_id":"4","category_name":"\u5176\u5b83"}]};


	var menuTpl = '<div class="category-list" id="%s"><div class="menus-list" id="%s"><li class="market-menus-item goods-list-item %s toggle toggle-off"><div class="short" id="%s"></div><div class="icon-container"></div><div class="content-list-wrapper icon-bg"><ul class="content-list bg"><li class="content-item"><strong><span class="name color" id="name">%s</span></strong><span class="saled">销量:<span class="color">%s</span></span></li><li class="market-menus-content-item content-item"><span class="text"><span class="color" id="price">%s</span>元<span class="color">1</span><span class="color" id="unit">%s</span></span><div class="btn-box"><span class="bundle"></span><a class="btn" id="reduce"><img src="src/img/btn-reduce.png"></a><input type="number" class="number-input" id="%s" readonly><a class="btn" id="plus"><img src="src/img/btn-plus.png"></a></div></li><li class="content-item toggle-hint-box"><p class="toggle-hint">%s</p></li></ul></div></li></div></div>';

	var menuText = "";
	for (var i = 0; i < menuInfo.content.length; i++) {
		menuText += vsprintf(menuTpl, [menuInfo.content[i].category_id, menuInfo.content[i].menus_id, menuInfo.content[i].menus_short, menuInfo.content[i].menus_short, menuInfo.content[i].menus_name, menuInfo.content[i].menus_sales, menuInfo.content[i].menus_price, menuInfo.content[i].menus_unit, menuInfo.content[i].menus_id, menuInfo.content[i].menus_rank]);
	}

	$("#main-list").append(menuText);


	$(".category-list").hide();
	$(".category-list#" + 1).show();

	
	$("#category a").live("click", function(){
		$(".checked").removeClass("checked");
		$(this).parent().siblings().addClass("unchecked");
		$(this).parent().addClass("checked");
		var id = $(this).attr('id');
		$(".category-list").hide();
		$(".category-list#" + id).show();
	})

	$("#plus").live("click", function(){
		
		var n = $(this).prev(".number-input").val();
		if(n){
			n++;
			$(this).prev(".number-input").val(n);
			ShowSum();
		}else{
			$(this).prev(".number-input").val(1);
			ShowSum();
		}
		GetCustomerMunus();
	})

	$("#reduce").live("click", function(){
		
		var n = $(this).next(".number-input").val();
		if(n <= 1){
			$(this).next(".number-input").val("");
			ShowSum();
		} else if(n > 1){
			n--;
			$(this).next(".number-input").val(n);
			ShowSum();
		}
		GetCustomerMunus();
	})

	$("#remove").live("click", function(){
		if(window.confirm('你确定要删除吗？')){
			$(this).parentsUntil("ul").remove();
			id = $(this).attr("data-id");
			RemoveMenus(id);
			ShowForList();
		}		
	})

})
</script>
</body>
</html>
